<template>
  <ul class="HousePackage_root__OSYQC">
    <li
      class="HousePackage_item__1c8FB"
      :key="index"
      v-for="(item,index) in list"
      @click="clickItem(item)"
      :class="active(item)"
    >
      <div></div>
      <p>
        <i :class="['iconfont', item.icon, 'HousePackage_icon__2EmUX']"></i>
      </p>
      {{item.name}}
    </li>
  </ul>
</template>

<script>
const HOUSE_PACKAGE = [
  {
    id: 1,
    name: "衣柜",
    icon: "icon-wardrobe"
  },
  {
    id: 2,
    name: "洗衣机",
    icon: "icon-wash"
  },
  {
    id: 3,
    name: "空调",
    icon: "icon-air"
  },
  {
    id: 4,
    name: "天然气",
    icon: "icon-gas"
  },
  {
    id: 5,
    name: "冰箱",
    icon: "icon-ref"
  },
  {
    id: 6,
    name: "暖气",
    icon: "icon-Heat"
  },
  {
    id: 7,
    name: "电视",
    icon: "icon-vid"
  },
  {
    id: 8,
    name: "热水器",
    icon: "icon-heater"
  },
  {
    id: 9,
    name: "宽带",
    icon: "icon-broadband"
  },
  {
    id: 10,
    name: "沙发",
    icon: "icon-sofa"
  }
];
export default {
  props: {
    data: {
      type: Array
    }
  },
  // 所有房屋配置项
  data() {
    return {
      isShow: !!this.data,
      list: [],
      HOUSE_PACKAGE,
      trueList: []
    };
  },
  created() {
    if (this.isShow) {
      this.show();
    } else {
      this.list = this.HOUSE_PACKAGE;
    }
  },
  methods: {
    show() {
      let list = [];
      this.data.forEach(item => {
        HOUSE_PACKAGE.some(value => {
          if (value.name === item) {
            return list.push(value);
          }
        });
      });
      this.list = list;
    },
    clickItem(item) {
      if (this.isShow) reutrn;
      else {
        const result = this.trueList.indexOf(item.name);
        if (result === -1) {
          this.trueList.push(item.name);
        } else {
          this.trueList.splice(result, 1);
        }
        this.$emit("abc", this.trueList);
      }
    },
    active(item) {
      if (this.trueList.indexOf(item.name) === -1) return "";
      return "active";
    }
  }
};
</script>
<style lang="less" scoped>
.HousePackage_root__OSYQC {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .HousePackage_item__1c8FB {
    position: relative;
    text-align: center;
    font-size: 14px;
    margin: 10px 0;
    width: 20%;
    height: 50px;
    line-height: 23px;
  }
}
.active {
  color: #21b97a;
}
.HousePackage_item__1c8FB div {
  top: 15px;
  right: 6px;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #000;
}
</style>
